import React, { Component } from 'react'
import './index.css';
import axios from 'axios';
// import qs from 'querystring';

export default class DouYinDetail extends Component {

    state = {
        detail: {}
    }
    
    render() {
        return (
            <div className="douyin-detail-container">
                <button className="btn btn-default" onClick={this.back}>返回</button>
                <h3>{this.state.detail.desc}</h3>
                <div className="video">
                    <video controls src={this.state.detail.video_local && ("http://cdn.xiaohigh.com" + this.state.detail.video_local)}></video>
                </div>
            </div>
        )
    }

    //声明后退的方法
    back = () => {
        // DOM  history 对象  history.go(-1)
        // this.props.history.goBack();
        //记住这个通用的方式 跳转  -1 为后退一个历史   -2 后退两个历史
        this.props.history.go(-1); // go(1);
    }


    async componentDidMount(){
        //1. params 传参
        // let id = this.props.match.params.id;
        //2. query 参数的获取方式
        // let id = qs.parse(this.props.location.search.slice(1)).id;
        //3. state 传参的获取方式
        let id = this.props.location.state.id;

        //设置 id
        // let id = 26;
        //获取当个视频的详细内容
        let {data} = await axios('http://api.xiaohigh.com:8090/douyin/' + id);
        //保存数据进 state
        this.setState({
            detail: data
        })
    }
}
